<template>
  <v-main>
    <div class="background">
        <v-img gradient="to top right, rgba(55,236,186,.7), rgba(25,32,72,.7)" ></v-img>
    </div>
    <v-container class="fill-height" fluid>
      <v-row align="center" justify="center">
        <v-col class="text-center">
          <v-sheet class="mx-auto" max-width="350">          
            <v-form ref="form" v-model="valid" lazy-validation >
              <v-text-field
                v-model="info.name"
                :rules="[rules.required]"
                label="Name"
                prepend-icon="mdi-account"
                required
              ></v-text-field>

              <v-text-field
                v-model="info.password"
                :append-icon="show ? 'mdi-eye' : 'mdi-eye-off'"
                :rules="[rules.required, rules.min]"
                :type="show ? 'text' : 'password'"
                label="Password"
                hint="At least 8 characters"
                prepend-icon="mdi-lock"
                @click:append="show = !show"
              ></v-text-field>
              <v-btn color="primary my-4" large block @click="login">登录</v-btn>
              <v-btn color="primary my-4" large block outlined @click="register">注册</v-btn>
            </v-form>
          </v-sheet>
        </v-col>
      </v-row>
    </v-container>
  </v-main>
  <!-- <v-main>
     <video class="login-video" src="@/assets/images/login-bg.mp4" autoplay loop muted></video>
    <v-container fluid class="fill-height">
      <v-row justify="center" align="center">
        <v-col class="text-center">
          <v-sheet max-width="500px">
            <v-form ref="form" v-model="valid" lazy-validation>
              <v-text-field
                v-model="info.name"
                :rules="[rules.required]"
                label="Name"
                prepend-icon="mdi-account"
                required
              ></v-text-field>

              <v-text-field
                v-model="info.password"
                :append-icon="show ? 'mdi-eye' : 'mdi-eye-off'"
                :rules="[rules.required, rules.min]"
                :type="show ? 'text' : 'password'"
                label="Password"
                hint="At least 8 characters"
                prepend-icon="mdi-lock"
                @click:append="show = !show"
              ></v-text-field>
              <v-btn color="success my-2" block @click="login">登录</v-btn>
              <v-btn color="primary my-2" block outlined @click="register"
                >注册</v-btn
              >
            </v-form>
          </v-sheet>
        </v-col>
      </v-row>
    </v-container>
  </v-main> -->
</template>

<script>
import { mapGetters } from "vuex";
import { RefreshRoutes } from "@/util/dynamic";
export default {
  data: () => ({
    valid: true,
    show: false,
    info: {
      name: "admin",
      password: "123456",
    },
    rules: {
      required: (value) => !!value || "Required.",
      min: (v) => v.length >= 6 || "Min 6 characters",
      // emailMatch: () => "The email and password you entered don't match",
    },
  }),
  computed: {
    ...mapGetters("app", ["user", "role"]),
    // ...mapGetters("route", ["routes"]),
  },
  methods: {
    async login() {
      // this.$msg.info(this.info.name+this.info.password)
      this.$store
        .dispatch("PromiseLogin", {
          name: this.info.name,
          password: this.info.password,
        })
        .then((roleid) => {
            RefreshRoutes(this, roleid).then(() => {
              // this.$router.push({name: "Dashboard"}).catch(()=>true);

                this.$msg.success("登录成功，转到首页")
                setTimeout(() => {
                  console.log(this.$route.query)
                  let redirect = this.$route.query.redirect || "/dashboard"
                  this.$router.push(redirect)
                }, 1000);

            });
        });
    },
    register() {
      this.$msg.warn("注册接口暂不开放");
    },
    validate() {
      this.$refs.form.validate();
    },
    reset() {
      this.$refs.form.reset();
    },
    resetValidation() {
      this.$refs.form.resetValidation();
    },
  },
};
</script>
<style scoped>
    .background {
        background: url("https://picsum.photos/1920/1080?random");
        /*background: -webkit-linear-gradient(bottom, #0062a8, #00c4ed) no-repeat;*/
        background-position: center;
        height: 100%;
        width: 100%;
        background-size: cover;
        position: fixed;
        opacity: 0.3;
    }
</style>